<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
 
	<head th:include="include/admin/adminHeader::html('属性管理')" ></head>
	<body>
		<div th:replace="include/admin/adminNavigator::html" ></div>
		<script>
	    $(function(){
	    	var cid = getUrlParms("cid");
	        var data4Vue = {
	        		uri:'properties',
	                beans: [],
	                bean: {id:0,name:'',category:{id:0}},
	                pagination:{},
	                category:''
			};
	
	        //ViewModel
	        var vue = new Vue({
	            el: '#workingArea',
	            data: data4Vue,
	            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
	            	this.getCategory(cid);
	            	this.list(0);
	            },        
	            methods: {     	
	            	getCategory:function(cid){
	                    var url = "categories/"+cid;
	                    axios.get(url).then(function(response) {
	                    	vue.category = response.data;
	                    })             		
	            	},
	            	list:function(start){
	                    var url =  "categories/"+cid+"/"+this.uri+"?start="+start;
	                    axios.get(url).then(function(response) {
	                    	vue.pagination = response.data;
	                    	vue.beans = response.data.content	;
	                    });
	            	},        	
	                add: function () {
	                	if(!checkEmpty(this.bean.name, "属性名称"))
	                		return;
	                	var url = this.uri;
	                	this.bean.category.id = cid;
	    				axios.post(url,this.bean).then(function(response){
	    					vue.list(0);
	    					vue.bean = {id:0,name:'',category:{id:0}};
	    				});
	                },
	                deleteBean: function (id) {
	                	if(!checkDeleteLink())
	                		return;
	                	var url = this.uri+"/"+id;
	    				axios.delete(url).then(function(response){
	    					if(0!=response.data.length)
	    						alert(response.data);
	    					else
	    						vue.list(0);
	    				});
	                },         
	                jump: function(page){
	                	jump(page,vue); //定义在adminHeader.html 中
	                },
	                jumpByNumber: function(start){
	                	jumpByNumber(start,vue);
	                }
	            }
	            
	        });                
	    });
	
		</script>
	
		<div id="workingArea" >
			<ol class="breadcrumb">
			  <li><a href="admin_category_list">所有分类</a></li>
			  <li><a :href="'admin_property_list?cid='+category.id">{{category.name}}</a></li>
			  <li class="active">属性管理</li>
			</ol>
		
		    <div class="listDataTableDiv">
		        <table class="table table-striped table-bordered table-hover  table-condensed">
		            <thead>
		            <tr class="success">
		                <th>ID</th>
		                <th>属性名称</th>
		                <th>编辑</th>
		                <th>删除</th>
		            </tr>
		            </thead>
		            <tbody>
						<tr v-for="bean in beans ">
						    <td>{{bean.id}}</td>
						    <td>
						    	{{bean.name}}
						    </td>
		                    <td>
		                    	<a :href="'admin_property_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>
		                    </td>
		                    <td>
						        <a href="#nowhere"  @click="deleteBean(bean.id)"><span class="   glyphicon glyphicon-trash"></span></a>
		                    </td>
						</tr>
		            </tbody>
		        </table>
		    </div>
		
			<div th:replace="include/admin/adminPage::html" ></div>
		
		    <div class="panel panel-warning addDiv">
		        <div class="panel-heading">新增属性</div>
		        <div class="panel-body">
		                <table class="addTable">
		                    <tr>
		                        <td>属性名称</td>
		                        <td><input  @keyup.enter="add"  v-model.trim="bean.name" type="text" class="form-control"></td>
		                    </tr>
		                    <tr class="submitTR">
		                        <td colspan="2" align="center">
		                        	<a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
		                        </td>
		                    </tr>
		                </table>
		        </div>
		    </div>
		</div>
		
		<div th:replace="include/admin/adminFooter::html" ></div>
	</body>
</html>		
